<style lang="scss">
  .🎄{
    display:grid;
    grid-template-columns:repeat(15, 1fr);
    grid-template-areas:
      ". . . . . . ........ l1  ....... . . . . . ."
      ". . . . . . ........ l1  ....... . . . . . ."
      ". . . . . ....... l2 l2 l2 ....... . . . . ."
      ". . . . . ....... l2 l2 l2 ....... . . . . ."
      ". . . . ...... l3 l3 l3 l3 l3 ...... . . . ."
      ". . . . ...... l3 l3 l3 l3 l3 ...... . . . ."
      ". . . ..... l4 l4 l4 l4 l4 l4 l4 ..... . . ."
      ". . . ..... l4 l4 l4 l4 l4 l4 l4 ..... . . ."
      ". . .... l5 l5 l5 l5 l5 l5 l5 l5 l5 .... . ."
      ". . .... l5 l5 l5 l5 l5 l5 l5 l5 l5 .... . ."
      ". ... l6 l6 l6 l6 l6 l6 l6 l6 l6 l6 l6 ... ."
      ". ... l6 l6 l6 l6 l6 l6 l6 l6 l6 l6 l6 ... ."
      ".. l7 l7 l7 l7 l7 l7 l7 l7 l7 l7 l7 l7 l7 .."
      ".. l7 l7 l7 l7 l7 l7 l7 l7 l7 l7 l7 l7 l7 .."
      "l8 l8 l8 l8 l8 l8 l8 l8 l8 l8 l8 l8 l8 l8 l8"
      "l8 l8 l8 l8 l8 l8 l8 l8 l8 l8 l8 l8 l8 l8 l8"
      ". . . . . ....... l9 l9 l9 ....... . . . . ."
      ". . . . . ....... l9 l9 l9 ....... . . . . ."
      ". . . . . ....... l9 l9 l9 ....... . . . . .";

    grid-auto-rows:20px;
    grid-gap:2px;
    max-width:500px;
    margin:0 auto;
  }

  .🍃{
    --Green:#8FD694;
    --Greener:#7DBA84;
    --Wood:#894E35;
    border-radius:5px;
    background-color:var(--Green);
    &:first-child{
      background:linear-gradient(to top right,#A5932C,#F9E570);
    }
    &:last-child{
      background-color:var(--Wood);
    }
    &:nth-child(even){
      background-color:var(--Greener);
    }
  }
  @for $n from 1 through 9{
    .🍃:nth-child(#{$n}){
      grid-area:l + $n;
    }
  }

</style>
<template>
  <div class="lesson-1">
    <div class="🎄">
      <div class="🍃"></div>
      <div class="🍃"></div>
      <div class="🍃"></div>
      <div class="🍃"></div>
      <div class="🍃"></div>
      <div class="🍃"></div>
      <div class="🍃"></div>
      <div class="🍃"></div>
      <div class="🍃"></div>
    </div>
  </div>
</template>

<script>
  export default {
    components: {},
    data() {
      return {
        count: 0
      }
    },
    computed: {},
    methods: {},
    mounted() {
    }
  }
</script>
